<template>
  <view class="padding-sm">
    <view class="app-header">
      <view class="operation-bar cu-bar bg-white">
        <view class="action">
          <view class="cuIcon-titles text-cyan"></view>
          <view class="text-xl text-bold">诊断信息</view>
        </view>
      </view>
      <!-- 导航栏 -->
      <nav-bar @fetchDisease="fetchDiseaseList" ref="navBar"></nav-bar>
    </view>

    <!-- 内容 -->
    <view class="app-body" v-if="basicInfo && basicInfo.name">
      <!-- 基础信息 -->
      <view class="basic-info">
        <uni-section class="mb-10" title="基础数据" sub-title="我的基本信息">
          <template v-slot:decoration>
            <view class="decoration1"></view>
          </template>
          <view class="content-list padding-sm">
            <view class="content-item flex-sub">
              <view class="title">姓名：</view>
              <view class="content">{{ basicInfo.name }}</view>
            </view>
            <view class="content-item flex-sub">
              <view class="title">性别：</view>
              <view class="content" v-if="basicInfo.sex === '0' || basicInfo.sex === '1'">
                {{ basicInfo.sex === "0" ? "男" : "女" }}
              </view>
              <view v-else class="content">/</view>
            </view>
          </view>
          <view class="content-list padding-sm">
            <view class="content-item flex-sub">
              <view class="title">联系电话：</view>
              <view class="content">{{ basicInfo.phoneNumber }}</view>
            </view>
            <view class="content-item flex-sub">
              <view class="title">紧急电话：</view>
              <view class="content">{{ basicInfo.emergencyContactNumber }}</view>
            </view>
          </view>
          <view class="content-list padding-sm">
            <view class="content-item flex-sub">
              <view class="title">身份证号：</view>
              <view class="content">{{ basicInfo.idNumber }}</view>
            </view>
            <view class="content-item flex-sub">
              <view class="title">婚姻：</view>
              <view class="content">{{ getMarriage() }}</view>
            </view>
          </view>
          <view class="content-list padding-sm">
            <view class="content-item flex-sub">
              <view class="title">民族：</view>
              <view class="content">{{ basicInfo.nation }}</view>
            </view>
            <view class="content-item flex-sub">
              <view class="title">职业：</view>
              <view class="content">{{ basicInfo.profession }}</view>
            </view>
          </view>
          <view class="content-list padding-sm">
            <view class="content-item flex-sub">
              <view class="title">身高：</view>
              <view class="content">{{ basicInfo.height }} cm</view>
            </view>
            <view class="content-item flex-sub">
              <view class="title">体重：</view>
              <view class="content">{{ basicInfo.weight }} kg</view>
            </view>
          </view>
          <view class="content-list padding-sm">
            <view class="content-item flex-sub">
              <view class="title">体脂指数：</view>
              <view class="content">{{ basicInfo.patientBmi }}</view>
            </view>
          </view>
          <view class="content-list padding-sm">
            <view class="content-item flex-sub">
              <view class="title">出身地：</view>
              <view class="content">{{ basicInfo.birthAddress }}</view>
            </view>
          </view>
          <view class="content-list padding-sm">
            <view class="content-item flex-sub">
              <view class="title">现居地：</view>
              <view class="content">{{ basicInfo.presentAddress }}</view>
            </view>
          </view>
        </uni-section>
      </view>

      <view class="basic-info margin-top">
        <uni-section class="mb-10" title="诊断信息" sub-title="我的诊断信息">
          <template v-slot:decoration>
            <view class="decoration2"></view>
          </template>
          <view class="content-list padding-sm">
            <view class="content-item flex-sub">
              <view class="title">门诊号：</view>
              <view class="content">{{ basicInfo.patientNumber }}</view>
            </view>
            <view class="content-item flex-sub">
              <view class="title">病史可靠程度：</view>
              <view class='cu-tag bg-cyan light' v-if="basicInfo.patientHistoryReliable === 1">可靠</view>
              <view class='cu-tag bg-red light' v-if="basicInfo.patientHistoryReliable === 0">不可靠</view>
            </view>
          </view>
          <view class="content-list padding-sm">
            <view class="content-item flex-sub">
              <view class="title">运动频率：</view>
              <view class="content">{{ basicInfo.exercise }}</view>
            </view>
            <view class="content-item flex-sub">
              <view class="title">烟、酒摄入史：</view>
              <view class="content">{{ basicInfo.ingestHistory }}</view>
            </view>
          </view>
          <view class="content-list padding-sm">
            <view class="content-item flex-sub">
              <view class="title">发病节气：</view>
              <view v-if="basicInfo.patientTerm" class='cu-tag bg-cyan light margin-right-xs' :key="index"
                v-for="(item, index) in basicInfo.patientTerm.split('/')">
                {{ item }}
              </view>
            </view>
            <view class="content-item flex-sub">
              <view class="title">就诊时间：</view>
              <view class="content">{{ basicInfo.clinicTime }}</view>
            </view>
          </view>
        </uni-section>
      </view>

    </view>
    <!-- 查无数据 -->
    <view v-else>
       <empty-page container-height="100px" text="暂无诊断信息" />
    </view>
    
    <view style="height: 20px;" />
    

  </view>
</template>

<script>
  export default {
    data() {
      return {
        basicInfo: {
          patientTerm: "",
        }
      }
    },
    methods: {
      /** 获取婚姻情况 */
      getMarriage() {
        switch (this.basicInfo.marriage) {
          case '0':
            return "未婚";
          case '1':
            return "已婚";
          case '2':
            return "离异";
          default:
            return "/";
        }
      },
      async fetchDiseaseList(basicId) {
        const {
          data: res
        } = await uni.$http.get(`/info/${basicId}`);
        if (res.code !== 200) return uni.$showMsg()
        this.basicInfo = res.data;
        // console.log(this.basicInfo);
      },
    }
  }
</script>

<style lang="scss">
  .app-header {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    border-radius: 5px;
    padding: 5px;
    height: 110px;
    background-color: white;
    
    position: sticky;
    top: 0;
    z-index: 999;
  }

  .content-list {
    position: relative;
    display: flex;
    align-items: center;

    .content-item {
      display: flex;
      align-items: center;
      overflow-x: auto;
      margin-right: 5px;

      .title {
        flex-shrink: 0;
        font-size: 14px;
      }

      .content {
        white-space: nowrap;
        font-size: 14px;
        color: gray;
      }
    }
  }

  .basic-info {
    border-radius: 5px;
    padding: 5px;
    height: 400px;
    background-color: white;
  }

  .decoration1 {
    width: 6px;
    height: 6px;
    margin-right: 4px;
    border-radius: 50%;
    background-color: #1cbbb4;
  }


  .decoration2 {
    width: 6px;
    height: 6px;
    margin-right: 4px;
    border-radius: 50%;
    background-color: #0081ff;
  }
</style>